<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="layout-vue">
<head>
    <meta charset="UTF-8">


    <th:block th:fragment="header">
        <style>
            tr.deleted1{
                color:gray;
            }
            input[type=number]{width:60px;}




        </style>
    </th:block>

</head>
<body>

<div class="container-md" id="container" th:fragment="content">
    <div id="app">

        <div class="card">

            <div class="card-header">
                <h3 class="card-title">User List </h3>
            </div>
            <div class="card-body">
                <div>
                    Code：<input v-model="catalog.code" />
                    Value：<input v-model="catalog.value" />
                    <button @click="updateCatalog(catalog)">提交</button>
                </div>
                <div>

                    关键词：<input placeholder="名称" v-model="selector.keyword">
                    <button onclick="loadData()">Search</button>
                </div>
                <table class="table table-hover table-bordered">
                    <tr>
                        <td>#</td>
                        <td>代码</td>
                        <td>说明</td>
                        <td>邮箱</td>
                        <td>密码</td>

                        <td> -</td>
                    </tr>
                    <template v-for="(catalog,index) in list">
                        <tr>
                            <td>{{index+1}}</td>
                            <td v-if="catalog.editing"><input v-model="catalog.code" > </td>
                            <td v-else><code>{{catalog.code}}</code></td>
                            <td v-if="catalog.editing"><input v-model="catalog.value" > </td>
                            <td v-else>{{catalog.value}}</td>
                            <td>
                                <button v-if="!catalog.editing" @click="catalog.editing=true">编辑</button>
                                <button v-else @click="updateCatalog(catalog)">保存</button>
                            </td>

                        </tr>
                        <tr>
                            <td colspan="10">
                                <template v-if="catalog.editing" v-for="(dict,di) in catalog.dictList">
                                    code:<input v-model="dict.code" />
                                    value:<input v-model="dict.value" />
                                    <code>{{dict.code}}</code><span>{{dict.value}}</span> |
                                </template>
                                <template v-else v-for="(dict,di) in catalog.dictList">
                                    <code>{{dict.code}}</code> <span>{{dict.value}}</span> |
                                </template>

                                <a  v-if="catalog.editing" @click="catalog.dictList=catalog.dictList||[];catalog.dictList.push({code:'newcode'})">添加</a>
                            </td>
                        </tr>
                    </template>
                </table>

            </div>

            <div style="position:fixed;right:10px;bottom:10px;">
                <a class="btn btn-default" @click="newEntity()">新增词典分类</a>
            </div>

        </div>
    </div>

</div>

<th:block th:fragment="footer">
    <script>

const { createApp } = Vue;
    var app = createApp({
    data() {
      return { 
        list:[], total:0 , catalog:{},
        currentIndex : -1,
        selector:{target:{},pageSize:20,withDictList:1}
      }
    },methods:{
        updateCatalog:function (catalog){
            var url = "/sys/dict/catalog/update";
            axios.post(url, catalog).then(function (response) {
                console.log("response",response)
                loadData();
            }).catch(function (error) {
                console.log("error",error);
                loadData();
            });
        },newEntity:function(){
            var catalog = {code:"新建用户",value:""};
            this.list.push(issue)
        },loadData:function(){
            var selector = this.selector || {}
            axios.post('/sys/dict/catalog/list', selector).then((response)=> {
                console.log("response",response)
                this.list = response.data.data||[];
                this.total=response.data.total || 0;
            }).catch(function (error) {
                console.log("error",error);
            });
        }
     },
    watch:{
        selector:{
            handler:function(nv,ov){
                loadData()
            },deep:true
        }
    }
  }).mount('#app');


function loadData( ){
    app.loadData();
}

window.onload=function(){
   loadData( );
}











    </script>
</th:block>
</body>
</html>